$wrapperMargin: 10px;
$levelHeight: calc((100% - 4 * #{$wrapperMargin}) / 3);
.commonWrapper {
  // width: 100%;
  // height: 100%;
  border: 1px solid #1a437c;
  box-shadow: 0 0 10px inset #1a437c;
  background: rgba(#1A3E76,0.2);
}
.level-title-box{
  margin: 10px;
  color: #25b8ff;
  border-left: 3px solid #25b8ff;
  padding: 2px 10px;
}
.control-right-panel {
  margin: 0 $wrapperMargin;
  height: 100%;
  .level-wrapper {
    display: flex;
    margin-top: $wrapperMargin;
 
    
  }
}
.item-box {
  height: 100%;
  width:100%;
  overflow-y:hidden;
}



.col-item{ 
  &-33{
    width: 100%;
    @extend .commonWrapper;
    height: calc((100% - 4 * #{$wrapperMargin}) / 3);
  }
  &-66{
    width: 100%;
    @extend .commonWrapper;
    height: calc(100% - #{$levelHeight} - 3 * #{$wrapperMargin});
  }
  }

.row-item{
  &-25{
    @extend .commonWrapper;
    width: 25%;
  }
  &-50{
    @extend .commonWrapper;
    width: 50%;
  }
  &-30{
    @extend .commonWrapper;
    width: 30%;
  }
  &-70{
    @extend .commonWrapper;
    width: 70%;
  }
  &-100{
    @extend .commonWrapper;
    width: 100%;
  }
}
.row-gatter{
  margin: 0 $wrapperMargin;
}
.row-gatter-left{
  margin-left: $wrapperMargin;
}
.col-gatter{
  margin-top:$wrapperMargin;
  // padding:10px;
}
.no-border-shadow{
  border:0;
  box-shadow: none;
}

.table-panel{
  display: flex; 
  // margin-top: 10px;
  height:calc(100% - 50px);
}


.control-right-panel {
  .echartBox-wrapper {
    .title-box {
      font-size: 14px !important;
      font-weight: normal !important;
    }
  }
}
